<template>
	<view class="head">
		<view class="bcgroud">
		</view>
		<view style="position: relative;">
			<tabbar style="position: absolute;top: -50rpx;left:0%; z-index: 99; width: 100%; background-color: #ffffff;border-radius: 38rpx;margin: 0 auto;"
			 :tablist="tabBars" @upp="changTabbea" :ppp="tabbarIndex"></tabbar>
			<swiper :style="{height:viewHeight+'px'}" :current="swiperindex" @change="changeimg">

				<swiper-item v-for="(item,index) in tabBars" :key="index">
					<view class="swiper-item">
						<scroll-view :scroll-y="true" :style="{height:viewHeight+'px'}" @scrolltolower="more(index)">
							<view>
								<view>这个还没写好后台爬虫！</view>
								<block v-for="(item,index1) in item.list" :key="index1">
									<index-list :item="item"></index-list>
								</block>
							</view>
							<view class="loading">{{loading}}</view>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>

		</view>
	</view>

</template>
<script>
	import indexList from "../../components/img-list.vue";
	import tabbar from "../../components/tabbar.vue";

	import a from '../../js/request.js';
	var http = new a
	export default {
		data() {
			return {
				viewHeight: 500,
				tabbarIndex: 0,
				swiperindex: 0,
				loading: '没有更多啦',
				api: {
					url: 'https://api.ixiaowai.cn/api/api.php?return=json'
				},
				triggered: false,
				// 以后避免对象是数
				tabBars: [{
						name: '推荐',
						list: [
							// 数据的传入
							{
								typesrc: "https://tva4.sinaimg.cn//large//87c01ec7gy1frkhy7h3aej21j00u0ng2.jpg"
							},
							{
								typesrc: "https://tva4.sinaimg.cn//large//0072Vf1pgy1foxkfd6198j31hc0u0nfe.jpg"
							},
							{
								typesrc: "https://tva2.sinaimg.cn/large/0072Vf1pgy1foxkg3fvi4j31hc0u0h35.jpg"
							}
						]
					},
					{
						name: '二次元',
						list: [
							// 数据的传入
							{
								typesrc: "https://tva2.sinaimg.cn//large//0072Vf1pgy1foxkfowh7rj31hc0u0ws9.jpg"
							},
							{
								typesrc: "https://tva4.sinaimg.cn//large//0072Vf1pgy1foxk7r8ic6j31hc0u0k7b.jpg"
							}
						]
					}, {
						// 还没找到的类似api
						name: '萌宠',
						list: []
					}, {
						name: 'COS装',
						list: []
					},
					{
						name: '其他',
						list: []
					}
				],
			}
		},
		methods: {
			// 上拉加载更多
			more(index) {
				// 服务器
				let listmodel = {
					typesrc: ""
				}
				for (var k = 0; k < 1; k++) {
					http.request(this.api).then((e) => {
						// console.log(e.data.imgurl)
						listmodel.typesrc = e.data.imgurl
						this.tabBars[index].list.push(listmodel)
					})
				}
			},
			// img改tabbar
			changeimg(e) {
				this.tabbarIndex = e.detail.current
			},
			// tabbar改img
			changTabbea(str) {
				this.swiperindex = str
			}
		},
		components: {
			indexList,
			tabbar
		},
		onLoad() {
			// 适配手机屏幕
			uni.getSystemInfo({
					success: (res) => {
						let height = res.windowHeight - uni.upx2px(95)
						this.viewHeight = height
					}
				}),
				this._freshing = false;
			setTimeout(() => {
				this.triggered = true;
			}, 1000)
		}
	}
</script>

<style>
	.loading {
		text-align: center;
		color: #929292;
	}

	.bcgroud {
		width: 100%;
		background-size: 100% 100%;
		height: 100px;
		position: relative;
		background-image: url("http://ani-qi.gitee.io/resources/msg.jpg");
		padding-top: 150rpx
	}
</style>
